iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0

了解不同 CSS 框架/工具的差異

https://ithelp.ithome.com.tw/upload/images/20240809/20165572WukHpxE5f6.png
source: 2023.stateofcss.com

多嘗試不同 CSS 框架

不同於前端框架(JavaScript),各種 CSS 框架提供了不同的解決方案,其適用的情境也各不相同。因此,了解各種技術及各自的適用情境非常重要。

UI 元件庫

對不擅長設計的人,使用現成的 UI 元件庫(如 Ant Design 和 Bootstrap)可以快速提升專案的專業度。實務上,許多後台系統也會直接使用現成的元件庫來加速開發流程。

CSS module

由於主流前端框架普遍採用元件化的開發方式,CSS Module 成為一種常見,用於避免 CSS 全域污染的解決方案,建議要了解其原理。

CSS-in-JS

學習 React 的人,建議可嘗試看看 CSS-in-JS,配合上 jsx 可將 HTML, CSS, JS 全部整合起來,也是一種常見的開發方式。

TailwindCSS

TailwindCSS 的寫法雖然不是每個人都認同,但其普及度高,學習難度也不大,可以嘗試看看,去理解其設計理念與優缺點。

前處理器:SCSS/SASS/LESS

雖說原生 CSS 支援的功能越來越多,但用到 CSS 前處理器的專案還是不少。這部分建議學 SCSS 而非 SASS/LESS,因其語法與原生 CSS 相近,容易上手。
另外,進階功能(如 function, if-else, for …)要審慎使用,避免 over-engineering 而導致程式碼難以維護。

後處理器:PostCSS

當只需要一、兩個原生 CSS 以外的功能時,PostCSS 是不錯的選擇之一。


文章同步發表於部落格中


上一篇
17. 前端框架怎麼選?
下一篇
19. 要學 TypeScript 嗎?
系列文
前端自學轉職攻略:30個常見問題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言